<template>
    <div>
        <seeker-input></seeker-input>
        <seeker-filter></seeker-filter>
        <div class="container">
            <div class="left-pane">
                <Occupations></Occupations>
            </div>
            <div class="right-pane">
                <Detail></Detail>
            </div>
        </div>
    </div>
</template>

<script>
import SeekerFilter from '@/components/seekerSearch/SeekerFilter.vue'
import SeekerInput from '@/components/seekerSearch/SeekerInput.vue'
import Occupations from '@/components/seekerSearch/Occupations.vue'
import Detail from '@/components/seekerSearch/Detail.vue'

export default {
    data() {
        return {}
    },
    components: {
        SeekerInput,
        SeekerFilter,
        Occupations,
        Detail
    }
}
</script>

<style  scoped>
.container {
    display: flex;
    height: 100vh;
}

.left-pane {
    width: 35%;
    border-right: 1px solid #ddd;
    overflow-y: auto;
}

.right-pane {
    width: 65%;
    overflow-y: auto;
}
</style>
